<template>
  <commonBox title="办公设备分布概览" width="745px" height="492px">
    <div class="chart-container">
      <echarts-component
        :option="option"
        width="680px"
        height="420px"
      ></echarts-component>
    </div>
  </commonBox>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echartsComponent from "@/components/echartsComponent.vue";
import commonBox from "../commonBox.vue";
const props = defineProps({
  assetType: {
    type: Array,
    default: () => [],
  },
});
const chartData = ref([]);
chartData.value = props.assetType.map((item) => {
  return {
    name: item.zcmc,
    value: item.total,
  };
});
const option = ref({});
onMounted(() => {
  option.value = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      right: "2%",
      top: "center",
      orient: "vertical",
      align: "right",
    },
    series: [
      {
        name: "类型",
        type: "pie",
        radius: ["60%", "90%"],
        center: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: chartData.value,
      },
    ],
  };
});
</script>

<style scoped lang="less"></style>
